import React from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import { Button } from '@material-ui/core';
import { SectionHeader } from 'components/molecules';

const Process = props => {
  const { className, ...rest } = props;

  return (
    <div className={clsx('jarallax', className)} {...rest}>
      <SectionHeader
        title="Crowded For Fans"
        titleVariant="h2"
        subtitle="Crowded for fans is a great and unique experience. Fans can create their own playlists and make them public or private, fans can follow other users and artists. You get a notification every time the artists you follow upload music. Last but not least, fans can GoLive! and listen to music together with their followers! It is an experience that you can not find on any other streaming platform! Start your first Live!"
        ctaGroup={[
          <Button variant="contained" color="primary" size="large">
            Download the app!
          </Button>,
        ]}
        disableGutter
        data-aos="fade-up"
      />
    </div>
  );
};

Process.propTypes = {
  /**
   * External classes
   */
  className: PropTypes.string,
};

export default Process;
